<template>
  <h1>部门信息管理</h1>
  <div class="toolbar">
    <el-button type="default" @click="search">
      <el-icon>
        <Search/>
      </el-icon>
      搜索
    </el-button>
    <el-button type="primary" @click="add">
      <el-icon>
        <CirclePlus/>
      </el-icon>
      新增
    </el-button>
    <el-button type="danger" @click="del">
      <el-icon>
        <Delete/>
      </el-icon>
      删除
    </el-button>
    <el-button type="warning" @click="reset">
      <el-icon>
        <Refresh/>
      </el-icon>
      重置
    </el-button>
    <el-button type="warning" @click="update">
      <el-icon>
        <Edit/>
      </el-icon>
      修改
    </el-button>
    <el-button type="success" @click="save">
      <el-icon>
        <Check/>
      </el-icon>
      保存
    </el-button>
  </div>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="60"/>
      <el-table-column prop="name" align="center" label="部门名称"/>
      <el-table-column prop="updateTime" align="center" label="最后操作时间"/>
      <el-table-column prop="createTime" align="center" label="创建时间"/>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="update(scope.row.id)">
            <el-icon>
              <Edit/>
            </el-icon>
            修改
          </el-button>
          <el-button size="small" type="danger" @click="del(scope.row.id)">
            <el-icon>
              <Delete/>
            </el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="dialogFormVisible" :title="formTile" width="500">
    <el-form :model="form" :rules="rules" ref="deptFormRef">
      <el-form-item label="部门名称" :label-width="140" prop="name">
        <el-input v-model="form.name" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {Check, CirclePlus, Delete, Edit, Refresh, Search} from "@element-plus/icons-vue";
import {queryAllApi, addDeptApi, queryByIdApi, deleteDeptApi, updateDeptApi} from "@/api/dept";

const dialogFormVisible = ref(false)
const formTile = ref('')
const form = ref({name: ''})
// 表单校验规则
const rules = ref({
  name: [
    {required: true, message: '请输入部门名称', trigger: 'blur'},
    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
  ]
})
const deptFormRef = ref()
// 页面加载时执行查询操作
onMounted(() => {
  search();
})
const tableData = ref([])
// 查询部门信息
const search = async () => {
  const result = await queryAllApi();
  if (result.code) {
    tableData.value = result.data;
  } else {
    ElMessage({
      type: 'error',
      message: result.message
    })
  }
}
// 新增部门信息
const add = () => {
  dialogFormVisible.value = true
  formTile.value = '新增部门'
  form.value = {
    name: ''
  }
  // 重置表单验证
  if (deptFormRef.value) {
    deptFormRef.value.resetFields();
  }
}
// 删除部门信息
const del = async (id) => {
  console.log(id)
  ElMessageBox.confirm('是否删除该部门?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const result = await deleteDeptApi(id);
    if (result.code) {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      await search();
    } else {
      ElMessage({
        type: 'error',
        message: result.message
      })
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  });
}
// 重置部门信息
const reset = () => {
  tableData.value = []
}
// 修改部门信息
const update = async (id) => {
  formTile.value = '修改部门'
  // 重置表单校验提示
  if (deptFormRef.value) {
    deptFormRef.value.resetFields();
  }
  const result = await queryByIdApi(id);
  if (result.code) {
    dialogFormVisible.value = true;
    form.value = result.data;
  } else {
    ElMessage({
      type: 'error',
      message: result.message
    })
  }
}
// 保存部门信息
const save = () => {
  if (!deptFormRef.value) return;
  deptFormRef.value.validate(async (valid) => {
    if (valid) {
      let result;
      if (form.value.id) {
        result = await updateDeptApi(form.value);
      } else {
        result = await addDeptApi(form.value);
      }
      if (result.code) {
        ElMessage({
          type: 'success',
          message: '保存成功'
        })
        dialogFormVisible.value = false
        await search();
      } else {
        ElMessage({
          type: 'error',
          message: result.message
        })
      }
    } else {
      ElMessage({
        type: 'error',
        message: '请输入正确的部门名称'
      })
      return false;
    }
  });
}
</script>

<style scoped>
.toolbar {
  margin: 10px;
}

</style>